<%@ page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>订单管理</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="../css/bootstrap-4.6.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .table td{
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
<%@include file="../resources/nav.jsp"%>
<div class="container-fluid" style="margin-top: 100px;">
    <!-- 看板 -->
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-5">
                    <div class="card">
                        <div class="card-header bg-light text-center">
                            商品占比分析
                        </div>
                        <div class="card-body">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5><span style="font-size: 16px;" class="label label-success">商品来源分布</span>
                                    </h5>
                                </div>
                                <div class="ibox-content">
                                    <div class="echarts" id="userAddressPie" style="height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="card">
                        <div class="card-header bg-light text-center">
                            商品占比分析
                        </div>
                        <div class="card-body">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5><span style="font-size: 16px;"
                                              class="label label-success">商品购买趋势</span></h5>
                                </div>
                                <div class="ibox-content">
                                    <div id='lineChart' style="height:300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
    <!-- 按钮组 -->
    <div class="row" style="margin-top: 20px;">
        <div class="col-md-1"></div>
<%--        <div class="col-md-10">--%>
<%--            <a href="${pageContext.request.contextPath}/user/export.do" class="btn btn-outline-success btn-sm"><i class="fa fa-file-excel-o"></i> 导出</a>--%>
<%--        </div>--%>
        <div class="col-md-1"></div>
    </div>
    <!-- 看板 -->

    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <table id="tb_user" class="table table-bordered table-hover table-sm">
                <thead>
                <tr class="bg-light text-center">
<%--                    <th><input type="checkbox" name="id"  id="ckids"></th>--%>
                    <th>订单编号</th>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品数量</th>
                    <th>商品单价</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="u" items="${requestScope.pro}">
                    <tr>
<%--                        <td class="text-center">--%>
<%--                            <input type="checkbox" name="ids" value="${u.id}">--%>
<%--                        </td>--%>
                        <td>${u.orderId}</td>
                        <td>${u.productId}</td>
                        <td>${u.title}</td>
                        <td>${u.num}</td>
                        <td>${u.price}</td>
<%--                        <td>--%>
<%--                            <a class="btn btn-sm btn-outline-success" href="${pageContext.request.contextPath}/order/info.do?id=${u.id}"><i class="fa fa-info"></i>查看订单明细</a>--%>
<%--                        </td>--%>
                    </tr>
                </c:forEach>

                </tbody>
            </table>
        </div>
        <div class="col-md-1"></div>


    </div>
    <div class="row">
        <div class="col-md-3"></div>
<%--        <div class="col-md-6" style="text-align: center">--%>
<%--            <c:if test="${requestScope.page.pageNum <=1}">--%>
<%--                <a href="#">上一页</a>--%>
<%--            </c:if>--%>
<%--            <c:if test="${requestScope.page.pageNum > 1}">--%>
<%--                <a href="/Mall/order/page?pageNum=${requestScope.page.pageNum-1}&pageSize=${requestScope.page.pageSize}">上一页</a>--%>
<%--            </c:if>--%>
<%--            <span>--%>
<%--				&nbsp;&nbsp;第 ${requestScope.page.pageNum} 页&nbsp;&nbsp;--%>
<%--			</span>--%>
<%--            <c:if test="${requestScope.page.isLastPage}">--%>
<%--                <a href="#">下一页</a>--%>
<%--            </c:if>--%>
<%--            <c:if test="${!requestScope.page.isLastPage}">--%>
<%--                <a href="/Mall/order/page?pageNum=${requestScope.page.pageNum+1}&pageSize=${requestScope.page.pageSize}">下一页</a>--%>
<%--            </c:if>--%>

<%--        </div>--%>
        <div class="col-md-3"></div>
    </div>
</div>
</body>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/echarts.min.js"></script><br />

<script>
    /*占比饼状图*/
    $(function() {
        var pieChart = echarts.init(document.getElementById("userAddressPie"));
        var pieoption = {
            title: {
                text: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['苹果', '菠萝', '小米手机', '笔记本电脑']
            },
            calculable: true,
            series: [{
                name: '商品品牌',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [{
                    value: 335,
                    name: '苹果'
                }, {
                    value: 310,
                    name: '菠萝'
                }, {
                    value: 234,
                    name: '小米手机'
                }, {
                    value: 135,
                    name: '笔记本电脑'
                }]
            }]
        };
        pieChart.setOption(pieoption);
    })

    /* 折线图 */
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('lineChart'));

    // 指定图表的配置项和数据
    option = {
        title: {
            text: '',
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['商品购买趋势']
        },
        toolbox: {
            show: true,

        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['苹果', '菠萝', '笔记本电脑', '小米手机', '跑车', '上衣', '裤子']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 次'
            }
        },
        series: [

            {
                name: '商品购买趋势',
                type: 'line',
                areaStyle: {
                    normal: {}
                },
                data: [100, 200, 250, 255, 300, 200, 260],
                markPoint: {
                    data: [{
                        name: '周最低',
                        value: -2,
                        xAxis: 1,
                        yAxis: -1.5
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    },
                        [{
                            symbol: 'none',
                            x: '90%',
                            yAxis: 'max'
                        }, {
                            symbol: 'circle',
                            label: {
                                normal: {
                                    position: 'start',
                                    formatter: '最大值'
                                }
                            },
                            type: 'max',
                            name: '最高点'
                        }]
                    ]
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
